<template>
  <div>
    <van-nav-bar title="消息列表" left-arrow @click-left="backUp"></van-nav-bar>
    <ul class="msglist">
      <li>
        <img src="../../assets/logo.png" alt />
        <div>
          <h5>
            系统通知
            <span>2019-10-09</span>
          </h5>
          <p>
            嘻嘻嘻嘻嘻嘻嘻嘻寻寻寻寻寻寻寻寻寻
            一致成本：预防成本，非一致成本：失败成本
            xxxxxxxxxxxx男男女女女女女女女女女女女女
          </p>
        </div>
      </li>
      <li>
        <img src="../../assets/logo.png" alt />
        <div>
          <h5>
            系统通知
            <span>2019-10-09</span>
          </h5>
          <p>
            嘻嘻嘻嘻嘻嘻嘻嘻寻寻寻寻寻寻寻寻寻
            一致成本：预防成本，非一致成本：失败成本
            xxxxxxxxxxxx男男女女女女女女女女女女女女
          </p>
        </div>
      </li>
      <li>
        <img src="../../assets/logo.png" alt />
        <div>
          <h5>
            系统通知
            <span>2019-10-09</span>
          </h5>
          <p>
            嘻嘻嘻嘻嘻嘻嘻嘻寻寻寻寻寻寻寻寻寻
            一致成本：预防成本，非一致成本：失败成本
            xxxxxxxxxxxx男男女女女女女女女女女女女女
          </p>
        </div>
      </li>
      <li>
        <img src="../../assets/logo.png" alt />
        <div>
          <h5>
            系统通知
            <span>2019-10-09</span>
          </h5>
          <p>
            嘻嘻嘻嘻嘻嘻嘻嘻寻寻寻寻寻寻寻寻寻
            一致成本：预防成本，非一致成本：失败成本
            xxxxxxxxxxxx男男女女女女女女女女女女女女
          </p>
        </div>
      </li>
      <li>
        <img src="../../assets/logo.png" alt />
        <div>
          <h5>
            系统通知
            <span>2019-10-09</span>
          </h5>
          <p>
            嘻嘻嘻嘻嘻嘻嘻嘻寻寻寻寻寻寻寻寻寻
            一致成本：预防成本，非一致成本：失败成本
            xxxxxxxxxxxx男男女女女女女女女女女女女女
          </p>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
import url from "@/utils/api.js";

export default {
  name: "msglist",
  components: {},
  data() {
    return {};
  },
  methods: {
    backUp() {
      this.$router.go(-1);
    }
  }
};
</script>
<style lang="less" scoped>
@import "~style/common.less";
.msglist {
  background-color: #fff;
  li {
    margin: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    img {
      width: 60px;
    }
    div {
      flex: 1;
      margin-left: 10px;
      h5 {
        .font-dpr(14px);
        color: @fontColorH3;
        font-weight: 500;
        display: flex;
        justify-content: space-between;
        align-items: center;
        span {
          .font-dpr(11px);
          font-weight: 400;
        }
      }
      p {
        .font-dpr(12px);
        color: @fontColorH3;
        font-weight: 400;
        .textoverflow2();
      }
    }
  }
}
</style>
